<template>
  <el-card>
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="账户手机号" class="lang" prop="telephone">
        <el-input
          v-model="formLabelAlign.telephone"
          :disabled="disabled1"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" class="lang" prop="password">
        <el-input
          v-model="formLabelAlign.password"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="商家名称" class="lang" prop="shop_name">
        <el-input
          v-model="formLabelAlign.shop_name"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="商家地址" class="lang">
        <el-button @click="handleAddr" :disabled="disabled"
          >选择商家地址</el-button
        >
      </el-form-item>
      <el-form-item label="详细地址" class="lang" prop="shop_address">
        <el-input
          v-model="formLabelAlign.shop_address"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="营业时间" prop="times">
        <el-time-picker
          :clearable="false"
          is-range
          v-model="formLabelAlign.times"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          format="HH:mm:ss"
          :disabled="disabled"
          @change="timeChange"
        >
        </el-time-picker>

        <!-- <el-date-picker
          v-model="formLabelAlign.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          :disabled="disabled"
        >
        </el-date-picker> -->
      </el-form-item>
      <!-- <el-form-item label="商家图片">
        <div class="unlodBox">
          <el-upload
            action
            multiple
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadFile"
            :limit="fileLimit"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :headers="headers"
            :disabled="disabled"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </el-form-item> -->
      <el-form-item label="商家图片">
        <div class="unlodBox">
          <el-upload
            v-if="!disabled"
            class="upload-demo"
            action
            :http-request="uploadFiles2"
            ref="upload"
            :limit="fileLimit2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :show-file-list="false"
            :headers="headers"
            multiple
          >
            <!-- <el-image
                  v-if="imageUrl"
                  class="imageGood"
                  :src="imageUrl"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过5M
            </div>
          </el-upload>
          <div class="imageBox">
            <ul class="el-upload-list el-upload-list--picture-card">
              <draggable v-model="imgShowList2">
                <li
                  v-for="(item, index) in imgShowList2"
                  :key="index"
                  class="el-upload-list__item is-success animated"
                >
                  <img
                    :src="imgHeader + item"
                    alt=""
                    class="el-upload-list__item-thumbnail"
                  />
                  <i class="el-icon-close"></i>
                  <span class="el-upload-list__item-actions">
                    <!-- 预览 -->
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreviewFileDetail1(item)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- 删除 -->
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemoveFileDetail1(index)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </li>
              </draggable>
            </ul>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="商家详情" prop="seller_desc">
        <textarea
          class="textareaBox"
          cols="60"
          rows="5"
          :disabled="disabled"
          v-model="formLabelAlign.seller_desc"
        ></textarea>
        <!-- <el-input
          type="textarea"
          :rows="2"
          :disabled="disabled"
          v-model="formLabelAlign.seller_desc"
        >
        </el-input> -->
      </el-form-item>
      <!-- 选择店铺地点弹出框 -->
      <el-dialog
        width="50%"
        title="选择商家所在位置"
        :visible.sync="innerVisible"
        append-to-body
        @opened="addrSearch"
      >
        <div style="margin-bottom: 10px" v-if="actForm.formatted_addresses">
          {{ actForm.formatted_addresses.recommend }}
        </div>
        <div>
          <div class="left">
            <div class="inputBox" style="display: flex; margin-bottom: 10px">
              <el-input
                v-model="input"
                placeholder="请输入位置关键字"
                @focus="focusadd"
                @input="search"
                @blur="inputblur"
              ></el-input>
              <el-button type="primary" @click="search">搜索</el-button>
            </div>
            <div class="adressBox" v-if="adressList.length && isShow">
              <div
                v-for="(item, index) in adressList"
                :key="index"
                @mousedown="chooseAdress(item, index)"
                class="address-item"
              >
                <span
                  class="el-icon-location"
                  style="font-size: 16px; color: #409eff; margin-right: 10px"
                >
                </span>
                <span :class="[item.isChoose === true ? 'checked' : '']">{{
                  item.title
                }}</span>
              </div>
            </div>
          </div>
          <div id="mapEl"></div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <el-button style="margin: 10px" @click="confirm">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 预览弹出层 -->
      <el-dialog :visible.sync="dialogVisibleDetail" class="imageDia">
        <el-image :src="imgHeader + dialogImageDetailUrl"></el-image>
      </el-dialog>
      <el-form-item class="btnBox">
        <el-button type="warning" v-if="disabled" @click="handleEdit"
          >编 辑</el-button
        >
        <el-button type="primary" v-if="dialogVisible1" @click="save"
          >确 认</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
let marker, markerClusterer;
import {
  getStoreManagement,
  editStoreManagement,
} from "../../../../utils/main";
import { compressImage } from "../../../../assets/js/compressImage";
import {
  user_po_list,
  uploadFiles,
  employee,
  condition,
  userDelete,
  compileAuth,
} from "../../../../utils/api";
import draggable from "vuedraggable";
import { Row } from "element-ui";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      imageUrl: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "张三",
        region: "",
        type: "",
        time: [],
        times: [],
        notice: "",
        content: "hlds",
      },
      srcList2: {},
      time1: "",
      time2: "",
      dialogImageDetailUrl: "",
      dialogVisibleDetail: false,
      fileList2: [],
      imgShowList2: [],
      time: [],
      imgHeader: this.Global.imgHeader,

      // 用户头像上传
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisible1: false,
      disabled: true,
      disabled1: true,
      token: sessionStorage.getItem("token"),
      seller_id: sessionStorage.getItem("seller_id"),
      seller_user_id: sessionStorage.getItem("seller_user_id"),
      // seller_id: 8,
      fileLimit: 8,
      fileLimit2: 8,
      imageUrl: "",
      imageUrl1: "",
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      headers: { "Content-Type": "multipart/form-data" },
      imageUrlList: [],
      innerVisible: false,
      input: "",
      isShow: true,
      actForm: {},
      selectList: [],
      options1: [],
      map: "",
      longitude: [],
      latitude: "",
      address: "",
      mapEl: [],
      adressList: [],
      position: {
        longitude: 116.454413, //经度
        latitude: 39.931295, //纬度
        city: "",
      },
      center: "",
      rules: {
        telephone: [
          { required: true, message: "请输入商家账户手机号", trigger: "blur" }, //change是数据改变，输入框一般用  blur:失去焦点触发
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        shop_name: [
          {
            required: true,
            message: "请输入商家名称",
            trigger: "blur",
          },
        ],
        shop_address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        seller_desc: [
          { required: true, message: "请输入商家详情", trigger: "blur" },
        ],
        times: [{ required: true, message: "请选择营业时间", trigger: "blur" }],
      },
    };
  },
  methods: {
    changeTime(e) {
      console.log("e", e);
      console.log("value1", this.value1);
    },
    handleAddr() {
      this.innerVisible = true;
    },
    addrSearch() {
      this.setMap();
      this.reserMap(this.position.latitude, this.position.longitude);
      this.getAreaCode(this.position.latitude, this.position.longitude);
    },
    // 地图
    setMap() {
      this.getAreaCode(this.position.latitude, this.position.longitude);
      // 防止重复绘制地图
      if (this.map) {
        return;
      }
      // 获取存放地图的容器
      this.mapEl = document.getElementById("mapEl");
      try {
        this.center = new TMap.LatLng(
          this.position.latitude,
          this.position.longitude
        );
        // 开始生成地图
        this.map = new TMap.Map(this.mapEl, {
          center: this.center,
          rotation: 0, //设置地图旋转角度
          pitch: 0, //设置俯仰角度（0~45）
          zoom: 15, //设置地图缩放级别
        });
      } catch (error) {
        console.error("error:", error);
      }

      // 地图点击时间

      this.map.on("click", (evt) => {
        if (evt.poi == null) return;
        if (marker) {
          marker.setMap(null);
          marker = null;
        }
        console.log(evt, "00");
        this.input = evt.poi.name;
        const center = new TMap.LatLng(evt.latLng.lat, evt.latLng.lng);
        this.getAreaCode(evt.latLng.lat, evt.latLng.lng);

        marker = new TMap.MultiMarker({
          map: this.map, //指定地图容器
          styles: {
            // 点标记样式
            marker1: new TMap.MarkerStyle({
              width: 20, // 样式宽
              height: 30, // 样式高
              anchor: { x: 10, y: 30 }, // 描点位置
            }),
          },
          // 点标记数据数组
          geometries: [
            {
              id: "demo",
              styleId: "marker1", // 和上面styles里面的marker1 向对应
              position: center,
              properties: {
                title: "marker",
              },
            },
          ],
        });
        return;
        markerLayer.add({
          position: evt.latLng,
        });
      });
      marker = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        styles: {
          // 点标记样式
          marker1: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        // 点标记数据数组
        geometries: [
          {
            id: "demo",
            styleId: "marker1", // 和上面styles里面的marker1 向对应
            // position: new TMap.LatLng(this.latitude, this.longitude), // 标点的位置
            position: this.center,
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },
    search() {
      if (this.input == "") {
        this.isShow = false;
        return;
      }
      this.isShow = true;
      const suggest = new TMap.service.Suggestion({
        pageSize: 10, // 返回结果每页条目数
        regionFix: false, // 搜索无结果时是否固定在当前城市
        servicesk: "", // key
      });
      suggest
        .getSuggestions({
          keyword: this.input,
          servicesk: "", // 签名（可在腾讯地图开放平台中拿）
        })
        .then((result) => {
          console.log(result, "搜索");
          this.adressList = result.data;
          this.adressList.forEach((item) => {
            item.isChoose = false;
          });
          // console.log(result, "搜索2");
        });
    },
    focusadd() {
      if (this.input == "") {
        return;
      }
      // this.search()
      this.isShow = true;
    },
    inputblur() {
      // this.adressList = []
      this.isShow = false;
    },
    //当我点击哪一个的时候改变背景色
    chooseAdress(data, index, event) {
      console.log(data, "选择的地址");
      this.chooseItem = data;

      // 取消之前选中的地址样式
      this.adressList.forEach((item, i) => {
        if (i !== index) {
          item.isChoose = false;
        }
      });
      // 设置当前选中的地址样式
      this.adressList[index].isChoose = true;
      this.$forceUpdate();
      this.reserMap(data.location.lat, data.location.lng, 15);
      this.position.latitude = data.location.lat;
      this.position.longitude = data.location.lng;
      this.input = data.title;
      this.isShow = false;
      this.getAreaCode(data.location.lat, data.location.lng);
      // this.adressList
    },
    //地图显示
    reserMap(lat, lng, zoom) {
      const center = new TMap.LatLng(lat, lng);
      const mapContainer = document.getElementById("mapEl");
      this.map.setCenter(new TMap.LatLng(lat, lng));
      if (marker) {
        marker.setMap(null);
        marker = null;
      }
      marker = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        styles: {
          // 点标记样式
          marker1: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        // 点标记数据数组
        geometries: [
          {
            id: "demo",
            styleId: "marker1", // 和上面styles里面的marker1 向对应
            position: center,
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },

    getAreaCode(lat, lng) {
      let that = this;
      //这里可以直接this.$jsonp地址传入你的经纬度;
      that
        .$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
          location: `${lat},${lng}`, // 经纬度
          key: "RO3BZ-DM63Q-FEH5C-BM3OU-WKCL2-7TFL5", //这里就是要开启那个service不然会报错让你开启
          output: "jsonp", // output必须jsonp 不然会超时
        })
        .then((res) => {
          if (res.status === 0) {
            this.actForm = res.result;
            this.position.longitude = this.actForm.location.lng;
            this.position.latitude = this.actForm.location.lat;
            // this.actForm.areaCode = res.result.ad_info.adcode.substring(0,4) + '00'
            console.log(this.actForm, "=-=-=asdasd", this.position);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取城市编码失败");
        });
    },
    confirm() {
      this.innerVisible = false;
      console.log(this.position, "aaa");
      // this.innerVisible = false;
    },
    // 以上是地图
    handlePictureCardPreviewFileDetail1(file) {
      this.dialogImageDetailUrl = file;
      this.dialogVisibleDetail = true;
    },
    handleRemoveFileDetail1(index) {
      if (this.imgShowList2.length == 1) {
        this.$message.error("至少有一张图片");
        return;
      }
      this.imgShowList2.splice(index, 1);
      this.fileList2.splice(index, 1); //删除上传的文件
    },
    async compressFile(singleFile) {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      let result = await compressImage({
        file: singleFile.raw,
        config,
        fileName: singleFile.name,
      });
      this.srcList2 = result.finalFile;
      console.log("bbb", this.srcList2);
      // console.log("压缩后图片1===>", this.imageList);
    },
    async uploadFiles2(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.imgShowList2.push(res.data.data.saveurl);
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     console.log(res);
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.imgShowList2.push(res.data.data.saveurl);
      //     // this.imageUrl1 = res.data.data.saveurl;
      //     // this.imageUrl = res.data.data.weburl;
      //     this.fileList2.push(item.file); //成功过后手动将文件添加到展示列表里
      //     // let i = this.fileList1.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    // timeChange(e) {
    //   this.time = this.formInline.time;
    //   this.getList();
    // },
    handleEdit(row) {
      // let obj = JSON.parse(JSON.stringify(row));
      // console.log("row", row);
      // console.log("obj", obj);
      if (this.formLabelAlign.seller_img != null) {
        this.imgShowList2 = this.formLabelAlign.seller_img.split(",");
      }
      let file1 = [];
      this.imgShowList2.forEach((item, index) => {
        file1.push({ uid: index, name: item });
      });
      this.fileList2 = file1;
      this.dialogVisible1 = true;
      this.formLabelAlign.seller_desc = "sdfdsgf";
      this.disabled = false;
      if (this.seller_user_id == this.formLabelAlign.id) {
        this.disabled1 = true;
      } else {
        this.disabled1 = false;
      }
    },
    timeChange() {
      console.log("change", this.formLabelAlign.times);
    },
    // handleSure() {
    //   this.dialogVisible1 = false;
    //   this.save();
    //   this.getList();
    //   this.disabled = true;
    // },
    async getList() {
      // this.loading = true;
      let res = await getStoreManagement(this.token, this.seller_id);
      if (res.data.status) {
        let obj = {};
        obj = res.data.data || [];
        // let times =
        //   this.formLabelAlign.operation_start +
        //   "," +
        //   this.formLabelAlign.operation_end;
        // console.log(times, "times");
        // times.split(",").forEach((item) => {
        //   this.time.push(new Date(item + " 00:00:00"));
        // });

        // let tmpArr = [];
        // tmpArr.push(new Date(this.formLabelAlign.operation_start));
        // tmpArr.push(new Date(this.formLabelAlign.operation_end));
        // this.formLabelAlign.time = tmpArr;
        // 时分秒的回显
        let tmpArr = [];
        let timeArr1 = [];
        let timeArr2 = [];
        let ness_start = "8:00:00";
        let ness_end = "20:00:00";
        if (obj.ness_start != null && obj.ness_end != null) {
          if (obj.ness_start.includes("-")) {
            timeArr1 = ness_start.split(":");
          } else {
            timeArr1 = obj.ness_start.split(":");
          }
          if (obj.ness_end.includes("-")) {
            timeArr2 = ness_end.split(":");
          } else {
            timeArr2 = obj.ness_end.split(":");
          }
        } else {
          timeArr1 = ness_start.split(":");
          timeArr2 = ness_end.split(":");
        }
        let today = new Date();
        tmpArr.push(
          new Date(
            today.getFullYear(),
            today.getMonth(),
            today.getDate(),
            Number(timeArr1[0]),
            Number(timeArr1[1]),
            Number(timeArr1[2])
          )
        );
        tmpArr.push(
          new Date(
            today.getFullYear(),
            today.getMonth(),
            today.getDate(),
            Number(timeArr2[0]),
            Number(timeArr2[1]),
            Number(timeArr2[2])
          )
        );
        console.log("转成啥", tmpArr);
        obj.times = tmpArr;
        this.formLabelAlign = obj;
        this.position.latitude = this.formLabelAlign.latitude;
        this.position.longitude = this.formLabelAlign.longitude;
        if (this.formLabelAlign.seller_address != "") {
          this.formLabelAlign.shop_address = this.formLabelAlign.seller_address;
        }
        // if (this.formLabelAlign.seller_img != "") {
        //   console.log(111);
        //   this.fileList = this.formLabelAlign.seller_img
        //     .split(",")
        //     .map((item) => {
        //       return {
        //         name: item.substring(item.lastIndexOf("/") + 1),
        //         url: "https://bjsf.bjsky.top" + item,
        //       };
        //     });
        //   this.imageUrlList = res.data.data.seller_img.split(",");
        //   console.log(this.fileList, " this.fileList");
        // } else {
        //   let imgLogo = [];
        //   console.log(222);
        //   this.fileList = imgLogo.push({
        //     name: "imgLogo.jpg",
        //     url: "https://bjsf.bjsky.top" + this.formLabelAlign.logo,
        //   });
        //   this.imageUrlList = res.data.data.logo.split(",");
        // }
        console.log(res.data.data.seller_img);
        this.imgShowList2 = res.data.data.seller_img.split(",");
        let file1 = [];
        this.imgShowList2.forEach((item, index) => {
          file1.push({ uid: index, name: item });
        });
        this.fileList2 = file1;
        // this.dialogVisible1 = true;
        // "https://bjsf.bjsky.top"
        // this.fileList = res.data.data.seller_img.split(",").map((item) => {
        //   return { name: "text.jpg", url: "https://bjsf.bjsky.top" + item };
        // });
        // console.log(this.fileList, " this.fileList");
        // console.log(this.fileListText, "oo");
        // console.log(this.imageUrl, "图片");
        // this.total = res.data.data.count;
        // console.log(this.total, shouchu);
        // let timer = setTimeout(() => {
        //   this.loading = false;
        //   clearTimeout(timer);
        // }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/materilsLogin");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.imgShowList2.length == 0) {
            this.$message.error("请上传商品图片");
            return;
          }
          // if (
          //   Object.prototype.toString.call(this.formLabelAlign.time) ==
          //   "[object Array]"
          // ) {
          //   const dates = [
          //     new Date(this.formLabelAlign.time[0]),
          //     new Date(this.formLabelAlign.time[1]),
          //   ];
          //   // 设置开始和结束时间到指定的时点
          //   const startDate = new Date(
          //     dates[0].getFullYear(),
          //     dates[0].getMonth(),
          //     dates[0].getDate(),
          //     8,
          //     0,
          //     0
          //   ); // 开始时间设为00:00:00
          //   const endDate = new Date(
          //     dates[1].getFullYear(),
          //     dates[1].getMonth(),
          //     dates[1].getDate(),
          //     31,
          //     59,
          //     59
          //   ); // 结束时间设为23:59:59

          //   // 转换为ISO字符串并格式化
          //   const formattedStartDate = startDate
          //     .toISOString()
          //     .substring(0, 19)
          //     .replace("T", " ");
          //   const formattedEndDate = endDate
          //     .toISOString()
          //     .substring(0, 19)
          //     .replace("T", " ");

          //   // 合并成所需格式的字符串
          //   // const combinedString = `${formattedStartDate}, ${formattedEndDate}`;
          //   this.formLabelAlign.time = `${formattedStartDate}, ${formattedEndDate}`;
          // console.log(combinedString);

          // 以下是将时分秒格式转化成字符串格式
          if (
            Object.prototype.toString.call(this.formLabelAlign.times) ==
            "[object Array]"
          ) {
            const dates = [
              new Date(this.formLabelAlign.times[0]),
              new Date(this.formLabelAlign.times[1]),
            ];
            console.log("dates", dates);

            // 设置开始和结束时间到指定的时点
            const startDate = new Date(
              dates[0].getFullYear(),
              dates[0].getMonth(),
              dates[0].getDate(),
              dates[0].getHours() + 8,
              dates[0].getMinutes(),
              dates[0].getSeconds()
            ); // 开始时间设为00:00:00
            const endDate = new Date(
              dates[1].getFullYear(),
              dates[1].getMonth(),
              dates[1].getDate(),
              dates[1].getHours() + 8,
              dates[1].getMinutes(),
              dates[1].getSeconds()
            ); // 结束时间设为23:59:59

            // 转换为ISO字符串并格式化
            const formattedStartDate = startDate
              .toISOString()
              .substring(0, 19)
              .replace("T", " ");
            const formattedEndDate = endDate
              .toISOString()
              .substring(0, 19)
              .replace("T", " ");
            console.log(`${formattedStartDate}, ${formattedEndDate}`);
            this.time1 = formattedStartDate.split(" ")[1];
            this.time2 = formattedEndDate.split(" ")[1];
            console.log(this.time1, "---", this.time2);
            // // 合并成所需格式的字符串
            // // const combinedString = `${formattedStartDate}, ${formattedEndDate}`;
            this.formLabelAlign.times = `${this.time1}, ${this.time2}`;
          }
          editStoreManagement(
            this.token,
            this.formLabelAlign.id,
            this.seller_id,
            this.formLabelAlign.seller_desc,
            this.formLabelAlign.telephone,
            this.formLabelAlign.password,
            // this.imageUrlList.join(","),
            this.imgShowList2,
            this.formLabelAlign.shop_name,
            this.formLabelAlign.shop_address,
            this.position.longitude,
            this.position.latitude,
            this.time1,
            this.time2
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.getList();
              this.dialogVisible1 = false;
              this.disabled = true;
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/materilsLogin");
                let timer = setTimeout(() => {
                  this.$message.error("错误，请刷新");
                }, 5000);
              }
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // uploadFile(item) {
    //   // uploadFiles(item) {
    //   this.$message("文件上传中........");
    //   //上传文件的需要formdata类型;所以要转
    //   uploadFiles(item.file).then((res) => {
    //     if (res.data.status != false || res.data.id != null) {
    //       // console.log(res);
    //       res.data.data.saveurl; //半截
    //       res.data.data.weburl; //全拼
    //       this.imageUrl1 = res.data.data.saveurl;
    //       this.imageUrl = res.data.data.weburl;
    //       // this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
    //       this.fileList.push({
    //         name: "text.jpg",
    //         url: res.data.data.weburl,
    //       });
    //       let i = this.fileList.indexOf(item.file);
    //       this.imageUrlList.push(this.imageUrl1);
    //       console.log(this.imageUrlList, "imgList");
    //       console.log(this.fileList, "list");
    //       this.handleSuccess();

    //       // console.log(this.fileList, "照片墙");
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   });
    // },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      // this.handleClosedelete();
    },
    handleRemove2() {},
    //这是我自定义的移除事件
    handleClosedelete(i) {
      this.fileList.splice(i, 1); //删除上传的文件
      console.log(this.fileList);
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的格式
    beforeUpload(file) {
      // console.log("dialogImageUrl", this.dialogImageUrl);
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    // 用户头像上传
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    // 照片墙
    // handleRemove(file, fileList) {
    //   // console.log(file, fileList);
    //   // console.log(this.imageUrlList, "map");
    //   let list = this.imageUrlList.map((item) => {
    //     return item.substring(item.lastIndexOf("/") + 1);
    //   });
    //   console.log(list, "list");
    //   let i = list.indexOf(file.name);
    //   console.log(i, "i");
    //   this.imageUrlList.splice(i, 1);
    //   this.fileList = fileList;
    //   // this.imageUrlList = this.imageUrlList.join(",");
    //   console.log(this.imageUrlList, "this.imageUrlList");
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    //   // console.log("this.dialogImageUrl", this.dialogImageUrl);
    // },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style scoped>
.lang {
  width: 400px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.btnBox {
  display: flex;
  justify-content: center;
}
.textareaBox {
  padding: 10px;
}
/* 以下是地图的 */
.left {
  position: relative;
}

.left .adressBox {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  z-index: 9999;
  width: 100%;
}

.address-item {
  padding: 5px 0;
  cursor: pointer;
}

.address-item:hover {
  background-color: #ecf0f1;
}

.checked {
  color: #409eff;
}
</style>